<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="./jquery-3.3.1.min.js"></script>
   
    <title>Document</title>
    <script>
       // onload = function(){
           // console.log(0)
       // }
  // $(document).ready(function(){

   //})
   //$().ready(function(){

   //})
   //$(function(){

  // })
//function a(){

//}
//console.log(window)


// js => jq
// jq = $(js/dom)
//jq = $(div)
// jq = $("<li>列表</li>")

//jq => js
// [0]
// js = jq[0]
// js = $(div)[0]

$(function(){
    var div =document.querySelector(".div");

    //var $div = $(div)
    var $div = $(":first")
    //$div.click(function(){

    //})
   // $("li:eq(2)").css("color","red")//等于2
   // $("li:gt(2)").css("color","green")//后两项
   // $("li:lt(2)").css("color","blue")//前两项

   // $("li:empty").css("color","red")
    //$("li:has(.span)").css("color","red")选择器
    //$("li:contains(999)").css("color","red")文本
})

    </script>
</head>
<body>
    <!-- <div class="div"></div> -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span class="span">999</span></li>
        <li>列表5</li>
        <li></li>
       
    </ul>
</body>
</html>